<template>
  <div class="project-management">
    <h1>园区建设项目管理</h1>

    <!-- 项目列表 -->
    <div class="project-list">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="projectStore.projects.length"
        layout="prev, pager, next"
      />

      <div
        v-for="project in projectStore.paginatedProjects(currentPage, pageSize)"
        :key="project.id"
        class="project-card"
      >
        <div class="card-header">
          <h3>{{ project.name }}</h3>
          <el-tag :type="statusType(project.status)">
            {{ project.status }}
          </el-tag>
        </div>

        <div class="card-body">
          <div class="progress-section">
            <el-progress
              :percentage="project.progress"
              :status="progressStatus(project.progress)"
            />
            <span>负责人：{{ project.manager }}</span>
          </div>

          <div class="action-buttons">
            <el-button type="primary" @click="openDetail(project.id)">
              项目详情
            </el-button>
            <el-button @click="openInspectionDialog(project.id)">
              巡检管理
            </el-button>
            <el-button @click="openIssueDialog(project.id)">
              问题上报
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 巡检任务对话框 -->
    <InspectionTaskDialog
      v-model="showInspectionDialog"
      :project-id="selectedProjectId"
    />

    <!-- 问题上报对话框 -->
    <IssueReportDialog
      v-model="showIssueDialog"
      :project-id="selectedProjectId"
    />

    <!-- 项目详情侧边栏 -->
    <ProjectDetailSidebar
      v-model="showDetailSidebar"
      :project-id="selectedProjectId"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useProjectStore } from '@/stores/project'
import InspectionTaskDialog from '@/components/InspectionTaskDialog.vue'
import IssueReportDialog from '@/components/IssueReportDialog.vue'
import ProjectDetailSidebar from '@/components/ProjectDetailSidebar.vue'

const projectStore = useProjectStore()
const currentPage = ref(1)
const pageSize = ref(6)
const selectedProjectId = ref(null)
const showInspectionDialog = ref(false)
const showIssueDialog = ref(false)
const showDetailSidebar = ref(false)

const statusType = (status) => {
  const types = {
    进行中: 'primary',
    已完成: 'success',
    已延期: 'danger',
    待启动: 'warning'
  }
  return types[status] || 'info'
}

const progressStatus = (progress) => {
  if (progress >= 100) return 'success'
  return progress >= 80 ? 'warning' : 'primary'
}

const openDetail = (projectId) => {
  selectedProjectId.value = projectId
  showDetailSidebar.value = true
}

const openInspectionDialog = (projectId) => {
  selectedProjectId.value = projectId
  showInspectionDialog.value = true
}

const openIssueDialog = (projectId) => {
  selectedProjectId.value = projectId
  showIssueDialog.value = true
}
</script>

<style scoped>
.project-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.project-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.progress-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.el-pagination {
  grid-column: 1 / -1;
  justify-content: center;
  padding: 20px 0;
}
</style>
